<template>
  <div class="full-screenn">
    <div class="artistic1">
      <span>Your location:</span><br />
      <span class="art">编辑页面</span>
    </div>
    <!-- 提交时把整个表单提交 -->
    <!-- <form @submit.prevent="saveAppt()" enctype="multipart/form-data" -->
    <form @submit.prevent="updateAppt()"  class="foem1">
      <div class="boox">
        <label for="ballname " class="form-label">球桌：</label>
        <input
          type="text"
          class="form-controlq"
          id="ballname "
          placeholder="请添加球桌"
          v-model="editAppts.ballname "
        />
      </div><br>
      <div class="boox">
        <label for="username " class="form-label">用户名：</label>
        <input
          type="text"
          class="form-controlq"
          id="username "
          placeholder="预约用户："
          v-model="editAppts.username "
        />
      </div><br>
      <!-- <div class="boox">   -->
      <!-- <label for="ballstste" class="QzT">球桌状态：</label>  
    
    <div class="radio-group"> <!-- 添加一个包含单选按钮和标签的容器 -->  
        <!-- <input    
        class="QzT1"  
          type="radio"    
          id="booked"    
          value="已预约"    
          v-model="editAppts.state"    
        /> &nbsp;&nbsp;   
        <label for="booked" class="radio-label">已预约</label>   &nbsp;&nbsp;&nbsp;&nbsp; 
          
        <input    
        class="QzT2"  
          type="radio"    
          id="notBooked"    
          value="未预约"    
          v-model="editAppts.state"    
        />    &nbsp;&nbsp;
        <label for="notBooked" class="radio-label">未预约</label>    
    </div>  
</div> --> 
<div class="boox">
        <label for="appt_time " class="form-label">预约时间：</label>
        <input
          type="text"
          class="form-controlq"
          id="appt_time"
          placeholder="预约用户："
          v-model="editAppts.appt_time"
        />
      </div><br>
  <div class="boox">  
    <label for="balltime" class="form-label">预约时长：</label>  
    <!-- 使用单选按钮来设置时长 -->  
    <div class="radio-group">  
      <input  
      class="QzT1"
        type="radio"  
        id="balltime"  
        value="无"  
        v-model="editAppts.balltime"  
      />  &nbsp;&nbsp;
      <label for="noDuration">无</label>  &nbsp;&nbsp;&nbsp;&nbsp;
  
      <input  
      class="QzT2"
        type="radio"  
        id="oneHour"  
        value="1小时"  
        v-model="editAppts.balltime"  
      />  &nbsp;&nbsp;
      <label for="oneHour">1小时</label>  &nbsp;&nbsp;&nbsp;&nbsp;
  
      <input  
      class="QzT3"
        type="radio"  
        id="twoHours"  
        value="2小时"  
        v-model="editAppts.balltime"  
      />  &nbsp;&nbsp;
      <label for="twoHours">2小时</label>  &nbsp;&nbsp;&nbsp;&nbsp;
  
      <input  
      class="QzT4"
        type="radio"  
        id="fullDay"  
        value="全天"  
        v-model="editAppts.balltime"  
      />  &nbsp;&nbsp;
      <label for="fullDay">全天</label>  
    </div>  
  </div> 
      <div class="boox">
        <label for="memo" class="form-label">备注：</label>
        <input
          type="text"
          class="form-controlq"
          id="memo"
          placeholder="请添加备注"
          v-model="editAppts.memo"
        />
      </div><br>
    <!-- <div class="boox">  
        <label for="image" class="form-label">图片：</label>  
        <input  
          type="file"  
          class="form-controlq"  
          id="image"  
          accept="image/*"  
          @change="onFileChange"  
        />  
      </div>   -->

      <div class="boox">
        <label for="image" class="form-label">图片：</label>
        <input
          type="text"
          class="form-controlq"
          id="image"
          placeholder="请添加图片"
          v-model="editAppts.image"
        />
      </div><br>
      <button type="submit" class="btn btn-warning">提交</button>
    </form>
  </div>
</template>

<script>
import { http } from "../../utils/http.js";
export default {
 data(){
    return{
      //随便定义一个来接受MyArticle里的编辑数据
      editAppts:{}
    }
  },
  //MyArticle拿到编辑数据
   created(){
    this.editAppts=JSON.parse(this.$route.query.apptInfo)
 

},

 methods:{
    updateAppt(){
      //是个对象，所以把数据都传过去
      http.post("/updateBallAppt",this.editAppts)
      .then(res=>{
        if(res.status===200){
          alert("更新成功");
        }else{
          alert("更新失败");
        }
        //回到路由
        this.$router.push("/appt");
      })
    }
  }

}




   
  

</script>

<style scoped>
/* 背景图片 */
.full-screenn {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/21.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; /* 确保内容在上面 */
  /* 可能需要额外的样式来确保内容可以显示在上面 */
}

/* 表单样式 */
.foem1 {
    font-size: 18px;
  /* 设置表单的尺寸、边框和位置 */
  width: 800px;

  border: 3px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使表单居中 */
  box-sizing: border-box; /* 确保边框和内边距不会增加元素的总宽度和总高度 */
  padding: 20px; /* 添加一些内边距以避免内容直接贴在边框上 */
}

.boox {
  /* 设置输入框容器的样式，如需要可以添加更多样式 */
  height: 50px;
  /* margin-bottom: 15px; 输入框之间的间隔 */
  
  
}

label {
  /* 设置标签的样式，如需要可以添加更多样式 */
  
  display: block; /* 使标签独占一行 */
  margin-bottom: 3px; /* 标签与输入框之间的间隔 */
}

.btn {
  /* 如果需要，可以设置提交按钮的样式 */
  margin-top: 5px;
}

/* 顶部英文 */
.artistic1 {
  position: fixed; /* 固定在视口上 */
  top: 0; /* 距离顶部0px */
  left: 0; /* 距离左侧0px */
  color: rgb(225, 16, 16); /* 设置文字颜色为白色 */
  font-style: italic; /* 设置文字为斜体 */
  font-size: 30px; /* 设置字号为28px */

  letter-spacing: 2px; /* 设置字间距为2px */
  padding-top: 20px;
  padding-left: 50px;
}
.art {
  padding-left: 300px;
}






/* 预约状态 */


 
  
.QzT {  
  display: block; /* 让标签单独占一行 */  
  margin-bottom: 5px; /* 如果需要，可以添加一些下边距来分隔标签和单选按钮 */  
}  
  
.radio-group {  
  display: flex; /* 使用flex布局来对齐单选按钮和标签 */  
  align-items: center; /* 垂直居中对齐 */  
}  
  

</style>